<template>
	<view class="box" @click="external">
		<view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<image @click.stop="fanhui" class="image1" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
			<!-- #ifndef MP-WEIXIN -->
			二手车
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<text @click="fanhui" style="position: absolute;left:50%;transform: translateX(-50%);">二手车</text>
			<!-- #endif -->
		</view>
		<view class="tit_list" :style="'height: calc(100vh - 88rpx - ' + statusBarHeight1 + 'px);'">
			<view class="tit">
				<view :class="userType == 0 ? 'xuan view' : 'view'" @click.stop="xuanzhong(0)">全部</view>
				<view :class="userType == 1 ? 'xuan view' : 'view'" @click.stop="xuanzhong(1)">个人</view>
				<view :class="userType == 2 ? 'xuan view' : 'view'" @click.stop="xuanzhong(2)">车商</view>
				<view class="sai" @click.stop="showModal" data-target="DrawerModalR">
					筛选
					<span>▼</span>
				</view>
			</view>
			<scroll-view class="scroll-view" :scroll-y="modalName == ''|| modalName == null" @scrolltolower="down"
				:scroll-top="scrollTop1" @scroll="scroll" refresher-background="#f5f5f5">
				<view class="liss" v-for="(item, index) in Recommend" :key="index" @click="details(item.id)">
					<image mode="aspectFit" :src="item.vehicleCoverPicture" />
					<view class="li_2" style="max-width: 336rpx">
						<view class="vehicleRecom">
							<span class="tagLabel">{{item.vehicleType==1?'到店新车':'二手车'}}</span>
							<text>{{item.title}}</text>
							<!-- <span v-if="item.vehicleType==2">{{item.vehicleBrandModel.split('|')[0] + ' '}} {{item.vehicleBrandModel.split('|')[1]?item.vehicleBrandModel.split('|')[1] + "/":"/"}} {{item.mileage<10000?item.mileage+"公里/":(item.mileage/10000).toFixed(1)+"万公里/"}} {{item.licensingTimeYear}}</span>
							<span v-else>{{item.vehicleBrandModel.split('|')[0] + ' '}} {{item.vehicleBrandModel.split('|')[1]?item.vehicleBrandModel.split('|')[1] + "/":"/"}} {{item.mileage<10000?item.mileage+"公里/":(item.mileage/10000).toFixed(1)+"万公里/"}} {{item.licensingTimeYear}}</span> -->
						</view>
						<view class="price">
							{{item.price}}万
						</view>
					</view>
				</view>
				<view v-if="Recommend.length == 0" class="none">
					<image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
					<view>没有更多数据了</view>
				</view>
				<view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
			</scroll-view>
		</view>
		<view class="cu-modal drawer-modal justify-end" :class="modalName == 'DrawerModalR' ? 'show' : ''">
			<scroll-view scroll-y="true" class="pop-scroll">
				<view class="tittit" v-if="!selectBrand && !selectSeries"
					:style="[{top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',},]">
					<view @click="hideModal()">×</view>筛选
				</view>
				<view class="cu-dialog basis-lg" v-if="!selectBrand && !selectSeries" @tap.stop
					:style="[{top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',height: 'calc(100vh - ' + CustomBar1 + 'px - 36px)',},]">
					<view class="cu-list menu text-left">
						<view style="height: 80rpx;"></view>
						<view class="choiceCarSeries" v-if="xzrangeData.length!=0">
							<view class="item" v-for="(i,j) in xzrangeData" :key="i.id">
								<span class="choiceCarSeriesName">{{i.brandName}} {{i.seriesName || ''}}</span>
								<span class="close" @click="qxchooseCars(i.id)">×</span>
							</view>
						</view>
						<view class="leibie">
							车辆类型
							<span style="color: #999999">（请选择类型）</span>
							<view class="list">
								<view @click.stop="type4Click(index)" :class="item.active ? 'li xuan' : 'li'"
									v-for="(item, index) in type4" :key="index">{{ item.valueName }}</view>
							</view>
						</view>
						<view class="quyu" v-if="cheType!='老年代步车' && cheType!='农用车'">
							品牌车系
							<view class="list">
								<view class="chooseCars" @click.stop="selectBrandChage">
									选择品牌车系
								</view>
							</view>
						</view>
						<view class="mianji" v-if="cheType!='老年代步车' && cheType!='农用车'">
							变速箱
							<view class="list">
								<view class="radio" @click.stop="tabClickbs(1)">
									<view class="radio_item" :class="bsChage==1?'radioxz':''"></view>
									<span>自动</span>
								</view>
								<view class="radio" @click.stop="tabClickbs(2)">
									<view class="radio_item" :class="bsChage==2?'radioxz':''"></view>
									<span>手动</span>
								</view>
							</view>
						</view>
						<view class="mianji">
							价格
							<view class="list">
								<view class="radio" @click.stop="tabClickjg(i.valueName)" v-for="(i,j) in type8"
									:key="i.valueNum">
									<view class="radio_item" :class="type8index==i.valueName?'radioxz':''"></view>
									<span>{{i.valueName}}</span>
								</view>
							</view>
							<view class="customPrice">
								<span
									style="font-size: 28rpx;font-weight: 500;color: #333333;margin-right: 8rpx;">自定义</span>
								<view class="minimumPrice">
									<input class="input" v-model="referCarSourceData.minimumPrice" type="number">
								</view> <span style="margin: 0 10rpx;">-</span>
								<view class="ceilePrice">
									<input class="input" v-model="referCarSourceData.highestPrice" type="number">
								</view><span style="margin-left: 8rpx;">万</span>
								<view class="confirm" @click="firmPrice()">
									确定
								</view>
							</view>
						</view>
						<view class="mianji" v-if="cheType!='老年代步车' && cheType!='农用车'">
							车龄
							<view class="list">
								<view class="radio" @click.stop="tabClickcl(i.valueName)" v-for="(i,j) in type9"
									:key="i.valueNum">
									<view class="radio_item" :class="type9index==i.valueName?'radioxz':''"></view>
									<span>{{i.valueName}}</span>
								</view>
							</view>
						</view>
						<view class="mianji" v-if="type5index!='新能源' && cheType!='老年代步车' && cheType!='农用车'" >
							排量
							<view class="list">
								<view class="radio" @click.stop="tabClickpl(i.valueName)" v-for="(i,j) in type10"
									:key="i.valueNum">
									<view class="radio_item" :class="type10index==i.valueName?'radioxz':''"></view>
									<span>{{i.valueName}}</span>
								</view>
							</view>
						</view>
						<view class="mianji" v-if="cheType!='老年代步车' && cheType!='农用车'">
							里程
							<view class="list">
								<view class="radio" @click.stop="tabClicklc(i.valueName)" v-for="(i,j) in type12"
									:key="i.valueNum">
									<view class="radio_item" :class="type12index==i.valueName?'radioxz':''"></view>
									<span>{{i.valueName}}</span>
								</view>
							</view>
						</view>
						<view class="leibie" v-if="type5index!='新能源' && cheType!='老年代步车' && cheType!='农用车'">
							排放标准
							<view class="list">
								<view @click.stop="type6Click(index)" :class="item.active ? 'li xuan' : 'li'"
									v-for="(item, index) in type6" :key="index">{{ item.valueName }}</view>
							</view>
						</view>
						<view class="mianji" v-if="cheType!='老年代步车' && cheType!='农用车'">
							燃油类型
							<view class="list">
								<view class="radio" @click.stop="tabClickry(i.valueName)" v-for="(i,j) in type5"
									:key="i.valueNum">
									<view class="radio_item" :class="type5index==i.valueName?'radioxz':''"></view>
									<span>{{i.valueName}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="tittit" v-if="selectBrand" :style="[{top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',},]">
					<view @click.stop="selectBrandfh()">
						<image style="width: 40rpx;height: 40rpx;"
							src="https://pic.bangbangtongcheng.com/8937350f727e4eeda6e97ab0d7398e65"></image>
					</view>选择品牌
				</view>
				<view class="cu-dialog basis-lg" v-if="selectBrand" @tap.stop style="background-color: #fff;"
					:style="[{top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',height: 'calc(100vh - ' + CustomBar1 + 'px - 36px)',},]">
					<view class="cu-list menu text-left" style="padding-bottom: 0;">
						<view style="height: 40px;"></view>
						<view class="buxian" @click.stop="selectSeriesChage()">不限品牌</view>
						<u-index-list :index-list="indexList" :customNavHeight= "viewHight">
							<view v-for="(item, index) in brandArr" :key="index">
								<!-- #ifdef APP-NVUE -->
								<u-index-anchor :text="indexList[index]"></u-index-anchor>
								<!-- #endif -->
								<u-index-item>
									<!-- #ifndef APP-NVUE -->
									<u-index-anchor :text="indexList[index]"></u-index-anchor>
									<!-- #endif -->
									<view class="list-cell" 
										v-for="(cell, indexs) in item" :key="indexs" @click.stop="selectSeriesChage(cell)">
										<view class="list-cell-left">
											<image class="list-cell-left-image" :src="cell.brandImage"></image>
											<span class="list-cell-left-span">{{cell.brandName}}</span>
										</view>
										<!-- <image class="list-cell-right"
											src="https://pic.bangbangtongcheng.com/static/bbcz/youjt.png" mode="">
										</image> -->
									</view>
								</u-index-item>
							</view>
						</u-index-list>
					</view>
				</view>
				<view class="tittit" v-if="selectSeries" :style="[{top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',},]">
					<view @click.stop="selectSeriesfh()">
						<image style="width: 40rpx;height: 40rpx;"
							src="https://pic.bangbangtongcheng.com/8937350f727e4eeda6e97ab0d7398e65"></image>
					</view>选择车系
				</view>
				<view class="cu-dialog basis-lg" v-if="selectSeries" @tap.stop
					:style="[{top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',height: 'calc(100vh - ' + CustomBar1 + 'px - 36px)',},]">
					<view class="cu-list menu text-left">
						<view style="height: 80rpx;"></view>
						<view class="vehicleBrand">
							<image class="vehicleBrand_image" :src="xzchelxx.brandImage" mode=""></image>
							<span class="vehicleBrand_span">{{xzchelxx.brandName}}</span>
						</view>
						<view class="vehicleBrand-xzcx">
							选择车系
						</view>
						<view class="buxian" style="border-bottom: 1px solid #f0f0f0;padding-left: 40rpx" @click="chooseCars()">不限车系</view>
						<view class="vehicleBrand_item" v-for="(i,j) in rangeData" :key="i.id" @click="chooseCars(i)">
							<image class="vehicleBrand_item_image" :src="i.seriesImage" mode=""></image>
							<span class="vehicleBrand_item_span">{{i.seriesName}}</span>
						</view>
					</view>
				</view>
				<view class="di">
					<view class="div l" @click.stop="cz">重置</view>
					<view class="div r" @click.stop="sx">确定</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="scrollTop>0" class="hui" @click.stop="totop">
			<image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
		</view>
		<!-- <view-tabbar :selected="0"></view-tabbar> -->
		<uniBall></uniBall>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	//#ifdef H5
	import wxshare from "../../utils/index.js";
	//#endif
	import Tabbar from "@/components/tabbar.vue";
	export default {
		data() {
			return {
				xuan: 1,
				modalName: "",
				Recommend: [],
				imgUrl: this.$imgSrc,
				scrollTop: "0",
				scrollTop1: "0",
				trigger: false,
				downStatus: true,
				upStatus: true,
				CustomBar1: "",
				userType:0,
				num: 0,
				user: uni.getStorageSync("Pduser"),
				type4: [],
				type5: [],
				type5index: -1,
				type6: [],
				type8: [],
				type8index: -1,
				type9: [],
				type9index: -1,
				type10: [],
				type10index: -1,
				type12: [],
				type12index: -1,
				selectBrand: false,
				selectSeries: false,
				bsChage: "",
				indexList: [],
				brandArr: [],
				// 选中的车辆信息
				xzchelxx: {},
				// 车系数据
				rangeData: [],
				// 选择的车系信息
				xzrangeData: [],
				// 查询车源
				referCarSourceData:{
					pageSize: 10,
					pageNo: 1,
					category:0,
					vehicleClassification:"",
					vehicleBrandModel:"",
					transmissionCase:"",
					price:"",
					mileage:"",
					minimumPrice:"",
					vehicleAge:"",
					highestPrice:"",
					displacement:"",
					emissionStandard:"",
					fuelType:"",
				},
				cheType:"",
				viewHight:''
			}
		},
		components: {
			"view-tabbar": Tabbar
		},
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"])
		},
		filters: {
			nums(val) {
				return val.toFixed(2);
			}
		},
		onLoad(options) {
			
			this.getType();
			this.getRecommend();
			this.CustomBar1 = this.CustomBar;
			// 获取窗口信息
			let getWindowInfo = uni.getWindowInfo()
			let isAndroid = false;
			const res = uni.getSystemInfoSync();
			if (res.platform == 'android') {
			  this.viewHight= getWindowInfo.screenHeight - (this.CustomBar1 + 36 + 80 + 50)
			} else {
			 this.viewHight= getWindowInfo.screenHeight - (this.CustomBar1 + 36 + 80 + 100)
			}
			
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		onPageScroll: function(Object) {
			console.log(Object.scrollTop, '---'); //实时获取到滚动的值
			this.scrollTop = Object.scrollTop;
		},
		async onPullDownRefresh() {
			this.Recommend = [];
			this.pageNo = 1;
			this.downStatus = true;
			if (this.upStatus) {
				this.trigger = true;
				await this.getRecommend();
			}
		},
		methods: {
			firmPrice(){
				if (!this.referCarSourceData.minimumPrice) {
					uni.showToast({
						title: "最低价不能为空",
						icon: "none",
						mask: true,
					});
					return
				}
				if (!this.referCarSourceData.highestPrice) {
					uni.showToast({
						title: "最高价不能为空",
						icon: "none",
						mask: true,
					});
					return
				}
				if (Number(this.referCarSourceData.minimumPrice)>Number(this.referCarSourceData.highestPrice)) {
					uni.showToast({
						title: "最低价不能高于最高价",
						icon: "none",
						mask: true,
					});
					return
				}
				this.type8index =-1
				this.referCarSourceData.price=""
			},
			selectBrandChage() {
				this.selectBrand = true
				this.brandArr = []
				this.brandInformation()
			},
			selectBrandfh() {
				this.selectBrand = false
			},
			selectSeriesChage(item) {
				if (!item) {
					this.selectBrandfh()
					return
				}
				this.selectSeries = true
				this.selectBrand = false
				this.xzchelxx = item
				this.modelInformation(item.id)
			},
			selectSeriesfh() {
				this.selectSeries = false
				this.selectBrand = true
			},
			tabClickbs(e) {
				this.bsChage = e
				if (e==1) {
					this.referCarSourceData.transmissionCase=1
				}else{
					this.referCarSourceData.transmissionCase=2
				}
			},
			tabClickjg(e) {
				this.type8index = e
				this.referCarSourceData.price=e
				this.referCarSourceData.minimumPrice=""
				this.referCarSourceData.highestPrice=""
			},
			tabClickpl(e) {
				this.type10index = e
			},
			tabClicklc(e){
				this.type12index = e
			},
			tabClickcl(e) {
				this.type9index = e
			},
			tabClickry(e) {
				this.type5index = e
				if (e=="新能源") {
					this.referCarSourceData.emissionStandard=""
					this.referCarSourceData.fuelType=""
					this.type10index=-1
					this.type6.forEach(el => {
						el.active = false;
					});
				}
			},
			// 获取车辆品牌信息
			brandInformation() {
				let that = this;
				this.$myRequest.get("/api/mobile/vehicleOwner/queryVehicleBrandList", {
          vehicleClassification: this.cheType
				})
					.then(res => {
						let arr = res.vehicleBrandMapList
						let indexList=[]
						for (let i in arr) {
							this.brandArr.push(arr[i])
							indexList.push(arr[i][0].initial)
						}
						this.indexList=indexList
					});
			},
			// 获取车系信息
			modelInformation(id) {
				let that = this;
				this.$myRequest.get("/api/mobile/vehicleOwner/queryVehicleSeriesListByBrandId", {
					brandId: id
				}).then(res => {
					this.rangeData = res.vehicleSeriesList
				});
			},
			chooseCars(item) {
				if (!item) {
					this.xzrangeData.push(this.xzchelxx)
					this.selectSeries = false
					this.selectBrand = false
					return
				}
				item.brandName=this.xzchelxx.brandName
				this.xzrangeData.push(item)
				this.selectSeries = false
				this.selectBrand = false
			},
			qxchooseCars(id) {
				this.xzrangeData.forEach((v, j) => {
					if (v.id == id) {
						this.xzrangeData.splice(j, 1)
					}
				})
			},
			xuanzhong(num) {
				this.userType = num;
				this.referCarSourceData.category=num
				this.Recommend = [];
				this.referCarSourceData.pageNo = 1;
				this.downStatus = true;
				// this.getRecommend();
				this.cz();
			},
			scroll(e) {
				this.oldScrollTop = e.detail.scrollTop;
				this.scrollTop = e.detail.scrollTop;
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					}
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"]
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari"
					]
				});
			},
			totop() {
				this.scrollTop1 = this.oldScrollTop;
				this.$nextTick(() => {
					this.scrollTop1 = 0;
				});
			},
			cz() {
				this.type4.forEach(el => {
					el.active = false;
				});
				this.type5index=-1
				this.type6.forEach(el => {
					el.active = false;
				});
				this.type10index=-1
				this.type12index=-1
				this.type9index=-1
				this.type8index=-1
				this.xzrangeData=[]
				this.bsChage=""
				this.referCarSourceData={
					pageSize: 10,
					pageNo: 1,
					vehicleClassification:"",
					vehicleBrandModel:"",
					transmissionCase:"",
					vehicleAge:"",
					price:"",
					mileage:"",
					minimumPrice:"",
					highestPrice:"",
					displacement:"",
					emissionStandard:"",
					fuelType:"",
				},
				this.referCarSourceData.category=this.userType
				this.Recommend = [];
				this.downStatus = true;
				// this.modalName = null;
				this.getRecommend();
			},
			sx() {
				let that = this;
				let arr=[]
				this.referCarSourceData.vehicleClassification=""
				this.referCarSourceData.fuelType=""
				this.referCarSourceData.emissionStandard=""
				this.xzrangeData.forEach(v=>{
					if (v.seriesName) {
						let as=v.brandName+"|"+v.seriesName
						arr.push(as)
					}else{
						let as=v.brandName
						arr.push(as)
					}
				})
				this.referCarSourceData.vehicleBrandModel=arr.join(",")
				this.type4.forEach(el => {
					if (el.active == true) {
						this.referCarSourceData.vehicleClassification=el.valueName
					}
				});
				this.referCarSourceData.fuelType=this.type5index==-1?"":this.type5index
				this.type6.forEach(el => {
					if (el.active == true) {
						this.referCarSourceData.emissionStandard=el.valueName
					}
				});
				this.referCarSourceData.vehicleAge=this.type9index==-1?"":this.type9index
				this.referCarSourceData.displacement=this.type10index==-1?"":this.type10index
				this.referCarSourceData.mileage=this.type12index==-1?"":this.type12index
				this.Recommend = [];
				this.referCarSourceData.pageNo = 1;
				this.downStatus = true;
				this.modalName = null;
				this.getRecommend();
			},
			type4Click(index) {
				let that = this;
				this.type4.forEach((el, index1) => {
					if (index == index1) {
						that.$set(that.type4[index1], "active", !el.active);
						this.cheType=that.type4[index1].valueName
          	this.brandInformation()
						if (that.type4[index1].valueName=="老年代步车" || that.type4[index1].valueName=="农用车") {
							this.type5index=-1
							this.type12index=-1
							this.type8index=-1
							this.type6.forEach(el => {
								el.active = false;
							});
							this.type10index=-1
							this.type8index=-1
							this.xzrangeData=[]
							this.bsChage=""
							this.referCarSourceData.vehicleBrandModel=""
							this.referCarSourceData.transmissionCase=""
							this.referCarSourceData.displacement=""
							this.referCarSourceData.emissionStandard=""
							this.referCarSourceData.fuelType=""
							this.referCarSourceData.mileage=""
							this.referCarSourceData.vehicleAge=""
						}
					} else {
						that.type4[index1].active = false;
					}
				});
			},
			type6Click(index) {
				let that = this;
				this.type6.forEach((el, index1) => {
					if (index == index1) {
						that.$set(that.type6[index1], "active", !el.active);
					} else {
						that.type6[index1].active = false;
					}
				});
			},
			getType() {
				let that = this;
				this.$myRequest
					.get("/api/mobile/vehicleOwner/queryDataDictionaryList", {
						type: "4,5,6,8,9,10,12"
					})
					.then(res => {
						res.dataDictionaryList.forEach(el => {
							el.active = false;
							if (el.type == 4) {
								that.type4.push(el);
							} else if (el.type == 5) {
								that.type5.push(el)
							} else if (el.type == 6) {
								that.type6.push(el)
							} else if (el.type == 8) {
								that.type8.push(el)
							}  else if (el.type == 9) {
								/* 客户需求，二手车筛选不需要新车选项 */
								if (el.valueName !== '新车') {
									that.type9.push(el);
								}
							}  else if (el.type == 10) {
								that.type10.push(el)
							}  else if (el.type == 12) {
								that.type12.push(el)
							}
						});
					});
			},
			sousuo() {
				// if (!this.userinfo.phone) {
				// 	uni.showToast({
				// 		title: "请登录",
				// 		icon: "none",
				// 		mask: true
				// 	});
				// 	return;
				// }
				uni.navigateTo({
					url: "/pages_houses/housing/oldHouseSearch?searchlogType=1&type=2"
				});
			},
			details(id) {
				uni.navigateTo({
					url: "/pages_owner/index/vehicleDetails?id=" + id,
				});
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target;
				uni.stopPullDownRefresh()
			},
			guan() {
				this.zbc = false;
			},
			down() {
				if (this.downStatus) {
					this.referCarSourceData.pageNo++;
					this.getRecommend();
				}
			},
			async up() {
				this.Recommend = [];
				this.referCarSourceData.pageNo = 1;
				this.downStatus = true;
				if (this.upStatus) {
					this.trigger = true;
					await this.getRecommend();
				}
			},
			getRecommend() {
				this.upStatus = false;
				this.$myRequest
					.get("/api/mobile/vehicleOwner/getUsedVehicle",this.referCarSourceData)
					.then(res => {
						if (!res.vehicleInformationList.length) {
							this.downStatus = false;
						}
						this.upStatus = true;
						this.trigger = false;
						this.Recommend = this.Recommend.concat(res.vehicleInformationList.pageList);
						uni.stopPullDownRefresh();
					});
			},
			hideModal(e) {
				this.modalName = null;
			},
			external() {
				this.modalName = null;
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	/deep/.u-index-list__letter{
		// right: 30rpx;
	}
	.tittit {
		position: fixed;
		top: 0;
		right: 0;
		background-color: #f8f8f8;
		z-index: 9999;
		max-width: 100%;
		width: 600rpx;
		transition-duration: 0.3s;
		transform: translateX(100%);

		text-align: center;
		line-height: 80rpx;
		font-size: 30rpx;
		border-bottom: 2rpx solid #cccccc;

		view {
			position: absolute;
			top: 0rpx;
			left: 20rpx;
			color: #999999;
			font-size: 54rpx;
			font-weight: 100;
		}
	}

	.show .tittit {
		transform: translateX(0%);
	}

	.cu-list {
		background-color: #fff;
		padding-bottom: calc(98rpx + env(safe-area-inset-bottom) / 2);

		.buxian{
			height: 40px;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
		}
		.tit {
			position: relative;
			width: 100%;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 30rpx;
			border-bottom: 2rpx solid #cccccc;

			view {
				position: absolute;
				top: 0rpx;
				left: 20rpx;
				color: #999999;
				font-size: 54rpx;
				font-weight: 100;
			}
		}

		.titlepp {
			height: 100rpx;
			line-height: 100rpx;
			margin-left: 38rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}

		.u-index-anchor {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			background-color: #f2f2f2 !important;
		}

		.list-cell {
			display: flex;
			box-sizing: border-box;
			width: 90%;
			padding: 10px 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: 14px;
			line-height: 24px;
			background-color: #fff;
			justify-content: space-between;
			align-items: center;

			.list-cell-left {
				display: flex;
				align-items: center;

				.list-cell-left-image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 17rpx;
				}
			}

			.list-cell-right {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.vehicleBrand {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;

			.vehicleBrand_image {
				width: 100rpx;
				height: 80rpx;
			}

			.vehicleBrand_span {
				font-size: 40rpx;
				font-weight: 400;
				color: #333333;
				margin-left: 5rpx;
			}
		}

		.choiceCarSeries {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			background-color: #F2F2F2;
			margin-top: 30rpx;
			padding: 20rpx 0;
			padding-left: 40rpx;
			padding-bottom: 0;
			.item {
				// width: 120rpx;
				padding: 10rpx 20rpx;
				// height: 50rpx;
				margin-bottom: 20rpx;
				border: 1px solid #333;
				font-size: 24rpx;
				line-height: 50rpx;
				margin-right: 20rpx;
				display: flex;
				align-items: center;

				.choiceCarSeriesName {
					max-width: 200rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-right: 10rpx;
				}

				.close {
					font-size: 42rpx;
				}
			}
		}

		.vehicleBrand-xzcx {
			width: 100%;
			height: 50rpx;
			background-color: #F2F2F2;
			line-height: 50rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			padding-left: 40rpx;
		}

		.vehicleBrand_item {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			.vehicleBrand_item_image {
				width: 142rpx;
				height: 75rpx;
				border-radius: 12rpx;
				margin-left: 50rpx;
			}

			.vehicleBrand_item_span {
				font-size: 30rpx;
				font-weight: 500;
				color: #6F6F6F;
				margin-left: 30rpx;
			}
		}

		.leibie {
			margin-top: 40rpx;
			font-size: 28rpx;
			margin-left: 40rpx;

			.list {
				width: 100%;
				margin-top: 24rpx;

				.li {
					display: inline-block;
					text-align: center;
					width: 154rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #f2f2f2;
					border-radius: 30rpx;
					margin-right: 24rpx;
					margin-bottom: 24rpx;
				}

				.xuan {
					background: #64b6a8;
					color: #fff;
				}
			}
		}

		.quyu {
			margin-top: 40rpx;
			font-size: 28rpx;
			margin-left: 40rpx;

			.list {
				width: 100%;
				margin-top: 24rpx;

				.chooseCars {
					width: 503rpx;
					height: 60rpx;
					background-color: #64B6A8;
					border-radius: 12rpx;
					border: 1px solid #64B6A8;
					text-align: center;
					line-height: 60rpx;
					color: #fff;
				}

				.li {
					display: inline-block;
					text-align: center;
					width: 154rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #f2f2f2;
					border-radius: 30rpx;
					margin-right: 24rpx;
					margin-bottom: 24rpx;
				}

				.xuan {
					background: #64b6a8;
					color: #fff;
				}
			}
		}

		.jiage {
			margin-top: 40rpx;
			font-size: 28rpx;
			margin-left: 40rpx;

			.list {
				width: 100%;
				margin-top: 24rpx;

				.li {
					display: inline-block;
					text-align: center;
					width: 214rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #f2f2f2;
					border-radius: 30rpx;
					margin-right: 24rpx;
					margin-bottom: 24rpx;
				}

				.xuan {
					background: #64b6a8;
					color: #fff;
				}
			}
		}

		.mianji {
			margin-top: 40rpx;
			font-size: 28rpx;
			margin-left: 40rpx;
			margin-right: 50rpx;

			.list {
				width: 100%;
				margin-top: 24rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.radio {
					width: 50%;
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;

					.radio_item {
						width: 36rpx;
						height: 36rpx;
						border: 1px solid #333;
						border-radius: 36rpx;
						margin-right: 14rpx;

						span {
							font-size: 28rpx;
							font-weight: 500;
							color: #333333;
						}
					}

					.radioxz {
						border: 1px solid #64B6A8;
						position: relative;
					}

					.radioxz::before {
						content: "";
						width: 24rpx;
						height: 24rpx;
						border-radius: 24rpx;
						background-color: #64B6A8;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}

			.customPrice {
				display: flex;
				align-items: center;

				.input {
					width: 88rpx;
					height: 40rpx;
					border-radius: 4rpx;
					border: 1px solid #333333;
					padding: 6rpx;
					color: #64B6A8;
					font-size: 24rpx;
				}

				.minimumPrice {
					position: relative;
				}

				.ceilePrice {
					position: relative;
				}

				.minimumPrice::after {
					content: "最低价";
					width: 100rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #999999;
					text-align: center;
					position: absolute;
					bottom: -34rpx;
					left: 50%;
					transform: translateX(-50%);
				}

				.ceilePrice::after {
					content: "最高价";
					width: 100rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #999999;
					text-align: center;
					position: absolute;
					bottom: -34rpx;
					left: 50%;
					transform: translateX(-50%);
				}

				.confirm {
					width: 120rpx;
					height: 58rpx;
					background-color: #64B6A8;
					border-radius: 4rpx;
					text-align: center;
					line-height: 58rpx;
					color: #fff;
					margin-left: 30rpx;
				}
			}
		}

		.loucen {
			margin-top: 40rpx;
			font-size: 28rpx;
			margin-left: 40rpx;

			.list {
				width: 100%;
				margin-top: 24rpx;

				.li {
					display: inline-block;
					text-align: center;
					width: 154rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #f2f2f2;
					border-radius: 30rpx;
					margin-right: 24rpx;
					margin-bottom: 24rpx;
				}

				.xuan {
					background: #64b6a8;
					color: #fff;
				}
			}
		}
	}

	.zbc {
		position: fixed;
		width: 100%;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 99999;
	}

	.box {
		width: 100%;
		// padding-bottom: 20rpx;
		background-color: #fff;
	}

	.tou {
		position: relative;
		width: 100%;
		// height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;
		/* #ifdef MP-WEIXIN */
		text-align: left;
		display: flex;
		align-items: center;
		/* #endif */

		.image1 {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			// top: 116rpx;
			left: 30rpx;
		}

		.image2 {
			position: absolute;
			width: 56rpx;
			height: 56rpx;
			// top: 28rpx;
			/* #ifdef MP-WEIXIN */
			position: initial;
			margin-left: auto;
			margin-right: 200rpx;
			/* #endif */
			bottom: 16rpx !important;
			right: 30rpx;
			// #ifdef APP
			// top: 50%;
			// #endif
		}
	}

	.tit_list {
		padding: 32rpx 30rpx calc(env(safe-area-inset-bottom) / 2);

		.tit {
			position: relative;
			margin-bottom: 32rpx;

			.view {
				display: inline-block;
				width: 120rpx;
				height: 58rpx;
				border-radius: 8rpx;
				text-align: center;
				line-height: 58rpx;
				color: #333;
				margin-right: 24rpx;
				font-size: 32rpx;
			}

			.xuan {
				background-color: #64b6a8;
				color: #fff;
			}

			.sai {
				position: absolute;
				font-size: 32rpx;
				top: 4rpx;
				right: 30rpx;

				span {
					margin-left: 8rpx;
					font-size: 20rpx;
				}
			}
		}

		.liss {
			width: 96%;
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
			border-bottom: 2rpx solid #e0e0e0;
			display: flex;
			// justify-content: space-between;

			image {
				background-color: #f8f8f8;
				width: 300rpx;
				height: 200rpx;
				border-radius: 20rpx;
			}

			.li_2 {
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.vehicleRecom {
					font-size: 36rpx;
					line-height: 44rpx;
					font-weight: 600;
					color: #333333;
					line-height: 44rpx;

					.tagLabel{
						vertical-align: top;
						background: #64B6A8;
						color: #fff;
						font-size: 24rpx;
						text-align: center;
						width: 106rpx;
						margin-right: 10rpx;
						padding: 4rpx 6rpx;
						border-radius: 4rpx;
					}
				}

				.price {
					font-size: 38rpx;
					font-weight: 600;
					color: #E00000;
				}
			}
		}

		.li:last-child {
			border-bottom: 0rpx solid #e0e0e0;
		}
	}

	.hui {
		position: fixed;
		right: 30rpx;
		bottom: 154rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background-color: #fff;
		border-radius: 34rpx;
		font-size: 26rpx;
		box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);
		
		image {
			width: 46rpx;
			height: 46rpx;
			margin-right: 18rpx;
		}
	}

	.cu-dialog {
		max-width: 100%;
		width: 600rpx;
	}

	.basis-lg {
		flex-basis: 600rpx;
		overflow: auto;
	}
	.pop-scroll {
		position: relative;
	}
	.di {
		position: absolute;
		transform: translateY(0rpx);
		width: 100%;
		bottom: 0;
		left: 75rpx;

		.div {
			padding-bottom: calc(env(safe-area-inset-bottom) / 2);
			height: calc(env(safe-area-inset-bottom) / 2 + 98rpx);
			display: inline-block;
			width: 300rpx;
			text-align: center;
			line-height: 98rpx;
			font-size: 30rpx;
		}

		.l {
			background: #e0e0e0;
		}

		.r {
			background: #64b6a8;
			color: #fff;
		}
	}

	.scroll-view {
		height: calc(100% - 58rpx - 24rpx);
	}

	.down {
		height: 60rpx;
		line-height: 60rpx;
		// border-top: 2rpx solid #d0d0d0;
		text-align: center;
	}

	.none {
		text-align: center;

		image {
			width: 430rpx;
			margin-bottom: 16rpx;
		}

		view {
			height: 40rpx;
			line-height: 40rpx;
			color: #666;
		}
	}
</style>
